<template>
  <div class="wrapper">
    <div v-for="(item,index) in placeList" :key="index" class="card-wrapper">
      <svg-icon class="card-icon" icon-class="statistics" />
      <div class="card-name">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      placeList: ['隔离总人数与新增统计', '隔离总人数与新增统计', '隔离总人数与新增统计', '隔离总人数与新增统计', '隔离总人数与新增统计', '隔离总人数与新增统计', '隔离总人数与新增统计']
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 28px;
  padding-right: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  align-content: flex-start;
  .card-wrapper{
    background: #FFFFFF;
    box-shadow: 0px 6px 12px 2px rgba(39,138,210,0.15);
    border-radius: 16px 16px 16px 16px;
    box-sizing: border-box;
    padding: 46px 34px 30px;
    width: 212px;
    height: 222px;
    text-align: center;
    margin-bottom: 28px;
    margin-right: 28px;
    .card-icon{
      font-size: 54px;
      margin-bottom: 26px;
    }
    .card-name{
      width: 100%;
      height: 92px;
      text-align: center;
      font-size: 24px;
      line-height: 32px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #232323;
    }
  }

}
</style>
